<script setup lang="ts">
import { ref, watch } from 'vue';
import type { DrawerProps } from 'ant-design-vue';
const placement = ref<DrawerProps['placement']>('right');
const open = ref<boolean>(false);
import { templateData } from '../config/config';
const activeKey = ref(['1']);

const showDrawer = () => {
  open.value = true;
};

const onClose = () => {
  open.value = false;
};

watch(activeKey, val => {
  console.log(val);
});

defineExpose({
  showDrawer
})
</script>

<template>
  <a-drawer :rootStyle="{zIndex: 10000}" :width="500" title="通用模板" :placement="placement" :open="open" @close="onClose">
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel v-for="(item, index) in templateData" :key="index" :header="item.title">
        <json-viewer
        :value="item.json"
        :expand-depth=5
        copyable
        :expanded="false"
        :show-array-index="false"
        sort></json-viewer>
      </a-collapse-panel>
    </a-collapse>
  </a-drawer>
</template>

<style scoped>
.dms-tool-content-erap {
  width: 375px;
  max-height: 520px;
  overflow-y: auto; 
  position: absolute;
  bottom: 55px;
  right: 55px;
  background-color: green;
}
</style>
